<template style="background:red;">
    <view
        :style="
               
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >

        <view
            :style="
            'background: '+'linear-gradient(to bottom, #CCFF8A, #EDF3E6)'+
            
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx;'
            "
        >
            <view class="swiper-box" :style="'height:' + (componentData.data.height * 2 || 320) + 'rpx'">
                <swiper :autoplay="true" :interval="componentData.data.interval" :duration="duration" @change="swiperChange" circular>
                    <block v-for="(item, index) in componentData.data.fileList" :key="index">
                        <swiper-item>
                            <diy-navigator :url="item.page.url" :callback="callback">
                                <view class="swiper-item" :data-url="item.page.url" :style="'height:' + (componentData.data.height * 2 || 320) + 'rpx'">
                                    <image
                                        mode="aspectFit"
                                        :src="item.imageUrl"
                                        alt=""
                                        :style="'width:100%;height:100%;border-radius:' + componentData.data.imgBorderRadius * 2 + 'rpx;'"
                                        lazy-load
                                    />
                                </view>
                            </diy-navigator>
                        </swiper-item>
                    </block>
                </swiper>
                <view class="indicator">
                    <view
                        :class="'indicator-item ' + (index === isIndex ? 'indicator-item__check' : '')"
                        :style="'background:' + (index === isIndex ? componentData.data.dotActiveColor : componentData.data.dotColor)"
                        v-for="(item, index) in componentData.data.fileList.length"
                        :key="index"
                    ></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// components/diy-swiper/diy-swiper.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
            indicatorDots: true,
            vertical: false,
            autoplay: false,
            interval: 2000,
            duration: 500,
            isIndex: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);
	
            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        toPage(e) {
            // wx.navigateTo({
            //   url: e.currentTarget.dataset.url,
            // })
        },

        swiperChange(e) {
            this.setData({
                isIndex: e.detail.current
            });
        },

        changeIndicatorDots() {
            this.setData({
                indicatorDots: !this.indicatorDots
            });
        },

        changeAutoplay() {
            this.setData({
                autoplay: !this.autoplay
            });
        },

        intervalChange(e) {
            this.setData({
                interval: e.detail.value
            });
        },

        durationChange(e) {
            this.setData({
                duration: e.detail.value
            });
        }
    }
};
</script>
<style>
@import './diy-swiper.css';
</style>
<style lang="scss" scoped>
	/* #ifdef MP-ALIPAY */
	image {
		background-repeat: no-repeat;
	}
	/* #endif */
</style>